<template>
	<div style="color:dodgerblue;font-weight: bold;font-size: 20px;">管理公告</div>
	<div style="padding: 10px;">
		<el-row style="margin: 10px 0;">
			<el-col :span="16">
				<el-button type="primary">新增</el-button>
			</el-col>
			<!-- 搜索区域 -->
			<el-col :span="8">
				<el-input v-model="search" placeholder="请输入关键字" style="width: 75%;" clearable />
				<el-button type="primary" style="margin-left: 10px;">查询</el-button>
			</el-col>
		</el-row>


		<el-table :data="tableData" stripe style="width: 100%" size="large">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="type" label="类型" />
			<el-table-column prop="date" label="时间" sortable />
			<el-table-column label="操作">
				<template #default="scope">
					
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					
					<el-popconfirm title="确认要删除吗?">
					    <template #reference>
					      <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					    </template>
					</el-popconfirm>
			 </template>
			</el-table-column>
		</el-table>
		<el-row :gutter="20" style="margin: 10px 0;">
		    <el-col :span="3" :offset="21">
				
				<el-popconfirm title="确认要删除吗?">
				    <template #reference>
				      <el-button type="danger">批量删除</el-button>
				    </template>
				</el-popconfirm>
			</el-col>
		</el-row>
		
		<div style="margin: 10px 0;">
			 <el-pagination
			   background
			   layout="total, sizes, prev, pager, next, jumper" 
			   v-model:currentPage="currentPage4"
			   :page-size="10"
			   :page-sizes="[5, 10, 20]"
			   @size-change="handleSizeChange"
			   @current-change="handleCurrentChange"
			   :total="total" />
		</div>
	</div>
	

</template>

<script>
	export default {
		name: "ManageInform",
		data() {
			return {
				currentPage4:1,
				total:10,
				search: '',
				tableData: []
			}
		},
		methods: {
			handleEdit() {

			},
			handleDelete() {

			},
			handleSizeChange(){
				
			},
			handleCurrentChange(){
				
			}
		},
		created(){
			let that=this
			this.$axios.get("http://localhost:8080/manage_inform/list").then(function(res)
			{
				that.tableData=res.data
			})
		}
	}
</script>

<style scoped>

</style>
